<template>
    <view class="payment_box">
        <view v-for="(item, index) in list" :key="index" class="goods_item">
            <view class="order_info_left">
                <view><text>回款单号：</text><text>{{ item.paymentNumber }}</text></view>
                <view><text>回款日期：</text><text>{{ item.paymentDate }}</text></view>
                <view><text>回款金额：</text><text>¥{{ item.paymentAmount }}</text></view>
                <view><text>付款方式：</text><text>{{ bus_pay_status[item.paymentMethod] }}</text></view>
                <view>
                    <text>付款截图：</text>
                    <view v-if="item.paymentScreenshot.length">
                        <image
                            style="width: 200rpx; height: 264rpx; margin-right: 20rpx;"
                            v-for="(item, index) in item.paymentScreenshot" :key="index"
                            :src="item" mode="aspectFill" @click="previewImg(index, item.paymentScreenshot)">
                        </image>
                    </view>
                    <text v-else>无</text>
                </view>
            </view>
            <view style="display: flex; justify-content: flex-end;">
                <view @click="goDetails(item)" class="btn">查看详情</view>
            </view>
        </view>
        <u-loadmore :status="status" />
    </view>
</template>

<script>
import { convertToDict } from '@/common/utils'
export default {
    data() {
        return {
            list: [],
            query: {
                pageNum: 1,
                pageSize: 10,
                relatedOrder: null
            },
            codeImgSrc: [
				'https://inews.gtimg.com/om_bt/OkEPpEM1AZfKFIi1Xq5YapKDWpVWWex8WQ-HJ-QG3VPO0AA/641',
				'https://inews.gtimg.com/om_bt/OkEPpEM1AZfKFIi1Xq5YapKDWpVWWex8WQ-HJ-QG3VPO0AA/641',
				'https://inews.gtimg.com/om_bt/OkEPpEM1AZfKFIi1Xq5YapKDWpVWWex8WQ-HJ-QG3VPO0AA/641'
			],
            // loading
            status: 'nomore'
        }
    },
    created() {
        console.log('加载的')
        this.bus_pay_status = convertToDict(JSON.parse(uni.getStorageSync('bus_pay_status')))
    },
    onShow() {
        console.log('显示')
    },
    methods: {
        getData (orderNumber) {
            this.query.relatedOrder = orderNumber
            this.status = 'loading'
            this.$http.get('/app/payment_received/list', this.query).then(res => {
                console.log(res)
                if (res.code == 200) {
                    this.list = [...this.list, ...res.rows]
                    this.list.forEach(item => {
                        item.paymentScreenshot = item.paymentScreenshot? item.paymentScreenshot.split(',') : []
                    })
                    if(this.query.pageSize > res.rows.length) {
                        this.status = 'nomore'
                    } else {
                        this.status = 'loadmore'
                    }
                } else {
                    uni.$u.toast(res.msg)
                }
            })
        },
        loadmore () {
            if(this.status == 'loadmore') {
                this.query.page++
                this.getData()
            }
        },
        previewImg (index, arr) {
            uni.previewImage({
                current: index,
                urls: arr
            })
        },
        goDetails(item) {
            uni.navigateTo({
                url: '/pages/payment/paymentDetails?id=' + item.id
            });
        },
    }
}
</script>

<style lang="scss"  scoped>
.goods_item {
    padding: 32rpx 28rpx;
    background: #FFFFFF;
    margin-bottom: 24rpx;
}
.order_info_left {
    
    >view {
        margin-bottom: 20rpx;
        font-size: 28rpx;
        display: flex;
        // 超出显示省略号
        // overflow: hidden;
        // text-overflow: ellipsis;
        // white-space: nowrap;
        >text:nth-child(1) {
            color: rgba(103, 117, 133, 1);
            display: inline-block;
            // margin-right: 20rpx;
            width: 170rpx;
        }
        >text:nth-child(2) {
            flex: 1;
            font-weight: 500;
            color: rgba(12, 16, 25, 1);
        }
    }
}
.btn {
    width: 140rpx;
    height: 60rpx;
    line-height: 60rpx;
    border-radius: 10rpx;
    background: #FFFFFF;
    border: 1px solid #4DACB1;

    font-size: 24rpx;
    font-weight: 500;
    color: rgba(77, 172, 177, 1);

    text-align: center;
}
</style>